01.5 Sección de Menú con Efecto CSS

En este tutorial, aprenderás a crear una sección de menú.

Paso 1: Estructura HTML Básica

Comienza creando la estructura básica del menú en tu archivo HTML:

<ul class="menu">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Servicios</a></li>
  <li><a href="#">Acerca de</a></li>
  <li><a href="#">Contacto</a></li>
</ul>

Paso 2: Estilos CSS Básicos

Añade estilos básicos para darle formato al menú:

.menu {
  list-style: none;
  display: flex;
  position: relative;
  padding: 0;
  margin: 0;
}

.menu li {
  margin: 0 20px;
}

.menu a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
  position: relative;
}

Paso 3: Aplicar el Efecto CSS Anchor Positioning

Utilizaremos CSS Anchor Positioning para crear un indicador que siga al elemento del menú cuando esté en estado :hover o :focus-visible.

Código CSS:

/* Declarar un ancla en el elemento <li> cuando su enlace <a> está en :hover o :focus-visible */
li:has(a:is(:hover, :focus-visible)) {
  anchor-name: --a;
}

/* Estilos para el indicador */
.menu::before {
  content: '';
  position: absolute;
  left: anchor(--a left, 0%);
  width: anchor-size(--a width, 0%);
  height: 2px;
  bottom: -5px;
  background-color: #000;
  transition: left 0.3s ease, width 0.3s ease;
}

Explicación:

• li:has(a:is(:hover, :focus-visible)) { anchor-name: --a; }

  Esta regla declara un ancla llamada --a en el elemento <li> cuyo <a> hijo está siendo apuntado (:hover o :focus-visible). Esto nos permite referenciar la posición y tamaño de este elemento en otros lugares del CSS.

• left: anchor(--a left, 0%);

  Establece la posición horizontal del indicador basado en la posición izquierda del ancla --a. Si no hay ancla activa, se establece en 0%.

• width: anchor-size(--a width, 0%);

  Ajusta el ancho del indicador para que coincida con el ancho del ancla --a. Si no hay ancla activa, se establece en 0%.

Paso 4: Compatibilidad y Consideraciones

• Compatibilidad del Navegador:

  La propiedad CSS Anchor Positioning es una característica experimental y puede no estar soportada en todos los navegadores. Verifica la compatibilidad antes de implementarla en producción.

Ejemplo Completo

Aquí está el código completo combinando HTML y CSS:

HTML

<style>
  .menu {
    list-style: none;
    display: flex;
    position: relative;
    padding: 0;
    margin: 0;
  }

  .menu li {
    margin: 0 20px;
  }

  .menu a {
    text-decoration: none;
    color: #000;
    font-size: 18px;
    position: relative;
  }

  li:has(a:is(:hover, :focus-visible)) {
    anchor-name: --a;
  }

  .menu::before {
    content: '';
    position: absolute;
    left: anchor(--a left, 0%);
    width: anchor-size(--a width, 0%);
    height: 2px;
    bottom: -5px;
    background-color: #000;
    transition: left 0.3s ease, width 0.3s ease;
  }
</style>
<ul class="menu">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Servicios</a></li>
  <li><a href="#">Acerca de</a></li>
  <li><a href="#">Contacto</a></li>
</ul>